{# One card per macro: its signature and notes from the source, the
   example rendered live, and the example's code. #}
{% from "components/macros/layout.html" import card, code_block %}
<div class="space-y-4">
  {% for macro in macros %}
  {% call card(id="macro-" ~ macro.name) %}
  <header class="space-y-1">
    <code data-signature class="font-mono text-sm text-aegis-text break-words">{{ macro.signature }}</code>
    {% if macro.doc %}<p data-doc class="text-xs text-aegis-muted">{{ macro.doc }}</p>{% endif %}
  </header>
  <div class="grid gap-4 lg:grid-cols-2">
    <div data-preview class="relative min-w-0 rounded border border-aegis-border/60 p-5">
      {% if macro.error %}<p role="alert" class="text-xs text-error">{{ macro.error }}</p>
      {% elif macro.preview is none %}<p class="text-xs text-aegis-muted">Code only: it acts on the whole page.</p>
      {% else %}{{ macro.preview }}{% endif %}
    </div>
    <div data-example class="min-w-0">{{ code_block(macro.example, lang="html+jinja") }}</div>
  </div>
  {% endcall %}
  {% endfor %}
</div>